<!--
 * @author  dumeng
 预览
-->
<template>
  <div class="news-preview">
    <el-dialog v-el-drag-dialog :close-on-click-modal="false" :visible.sync="state" title="预览" width="600px" center :before-close="handleCancel">
      <div v-loading="previewLoading" class="preview-container">
        <section class="page-main">
          <h3>{{ detail.name }}</h3>
          <p class="survey-time">
            <span class="time">{{ formatTime(detail.startTime, 3) }}至{{ formatTime(detail.endTime, 3) }}</span>
          </p>
          <p class="survey-remark" v-html="detail.remark" />
          <section class="survey-question">
            <ul>
              <li v-for="(item, index) in question" :key="item.id" class="question-item">
                <p class="question-title" :class="{'must': item.isMust === '1'}">
                  <span class="question-type">{{ item.questionType | filterType }}</span>
                  <span class="question-stem">{{ index+1 }}. {{ item.stem }}{{ questionRange(item) }}</span>
                </p>
                <section class="question-container">
                  <!--单选-->
                  <template v-if="item.questionType === 'WJWTLX_01'">
                    <section
                      v-for="ite in JSON.parse(item.answer).opts"
                      :key="ite"
                      class="question-option"
                    >
                      <span class="select-icon" />
                      <span>{{ ite }}</span>
                    </section>
                    <section class="question-option">
                      <span class="select-icon" />
                      <span>其他</span>
                    </section>
                    <input
                      type="text"
                      placeholder="输入其他回答"
                    >
                  </template>
                  <!--多选-->
                  <template v-else-if="item.questionType === 'WJWTLX_02'">
                    <section
                      v-for="ite in JSON.parse(item.answer).opts"
                      :key="ite"
                      class="question-option"
                    >
                      <span class="select-icon" />
                      <span>{{ ite }}</span>
                    </section>
                    <section class="question-option">
                      <span class="select-icon" />
                      <span>其他</span>
                    </section>
                    <input
                      type="text"
                      placeholder="输入其他回答"
                    >
                  </template>
                  <textarea v-else-if="item.questionType === 'WJWTLX_03'" />
                  <section v-else class="check-date" />
                </section>
              </li>
            </ul>
          </section>
        </section>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get } from '../api'
import { query } from '../api/question'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  name: 'Preview',
  directives: { elDragDialog },
  filters: {
    filterType(t) {
      if (t === 'WJWTLX_01') {
        return '单选'
      } else if (t === 'WJWTLX_02') {
        return '多选'
      } else {
        return '填空'
      }
    }
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      detail: {},
      question: [],
      state: true,
      previewLoading: false,
      view: '/API-DOCUMENT/document/file/download?id='
    }
  },
  created() {
    this.getData()
  },
  methods: {
    /**
			 * 设置题目限制
			 */
    questionRange(item) {
      let str1 = ''
      let str2 = ''
      try {
        if (item.questionJson) {
          const obj = JSON.parse(item.questionJson)
          if (item.questionType === 'WJWTLX_02') {
            str1 = !obj.optionFloor && obj.minOption ? `最少选${obj.minOption}项` : ''
            str2 = !obj.optionUpper && obj.maxOption ? `最多选${obj.maxOption}项` : ''
          } else if (item.questionType === 'WJWTLX_04') {
            str1 = `最多上传${obj.maxOption}张`
          } else if (item.questionType === 'WJWTLX_05' || item.questionType === 'WJWTLX_06') {
            str1 = !obj.optionFloor && obj.minOption ? `最小值为：${obj.minOption}` : ''
            str2 = !obj.optionUpper && obj.maxOption ? `最大值为：${obj.maxOption}` : ''
          } else if (item.questionType === 'WJWTLX_07') {
            str1 = !obj.optionFloor && obj.minOption ? `最早日期为：${obj.minOption}` : ''
            str2 = !obj.optionUpper && obj.maxOption ? `最晚日期为：${obj.maxOption}` : ''
          }
          if (str1 || str2) {
            return '(' + str1 + (str1 && str2 && ',') + str2 + ')'
          }
        } else {
          return ''
        }
      } catch (err) {
        return ''
      }
    },
    /**
			 * 根编辑回显
			 */
    getData() {
      this.previewLoading = true
      return new Promise((resolve, reject) => {
        get({ id: this.id }).then(res => {
          this.previewLoading = false
          this.detail = res.data.data
          this.getQuestion()
        }).catch(error => {
          this.previewLoading = false
          reject(error)
        })
      })
    },
    getQuestion() {
      this.previewLoading = true
      return new Promise((resolve, reject) => {
        query({ dataId: this.id }).then(res => {
          this.previewLoading = false
          this.question = res.data.data
        }).catch(error => {
          this.previewLoading = false
          reject(error)
        })
      })
    },
    /**
			 * 格式化时间
			 * @param time
			 * @param num
			 * @returns {string}
			 */
    formatTime(time, num) {
      if (!time) {
        return
      }
      const d = new Date(time.replace(/-/g, '/'))
      if (num === 3) {
        return (
          d.getFullYear() + '年' +
						(d.getMonth() + 1) +
						'月' +
						d.getDate() +
						'日'
        )
      } else {
        return (
          (d.getMonth() + 1) +
						'月' +
						d.getDate() +
						'日'
        )
      }
    },
    handleCancel() {
      this.$emit('closeSet')
    }
  }
}
</script>

<style lang="scss">
  .news-preview {
    position: relative;
    .preview-container{
      height: 80vh;
      position: relative;
      .page-main {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 15px;
        h3 {
          font-size: 20px;
          color: #333;
          margin: 15px 0;
          text-align: left;
          line-height: 1.1;
          font-weight: bold;
        }
        .survey-time {
          width: 100%;
          height: 37px;
          padding: 0 10px;
          font-size: 14px;
          color: #666;
          background-color: #f8f9fa;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .status {
            display: flex;
            align-items: center;
            color: #EB523C;
            &:before {
              content: '';
              display: inline-block;
              width: 3px;
              height: 3px;
              border-radius: 50%;
              background-color: #EB523C;
              margin-right: 4px;
            }
          }
        }
        .survey-remark {
          font-size: 14px;
          color: #666;
          margin-top: 18px;
          padding-bottom: 18px;
          border-bottom: 1px dashed #999999;
          img, video, audio {
            width: 100% !important;
          }
        }
        .survey-question {
          &>ul{
            list-style: none;
            padding: 0;
            margin: 0;
          }
          .question-item {
            margin-top: 18px;
            .question-title {
              display: flex;
              align-items: flex-start;
              font-size: 15px;
              color: #333;
              margin-bottom: 18px;
              &.must:before {
                content: '*';
                display: inline-block;
                color: #EC4736;
                margin-right: 2px;
              }
              .question-type {
                font-size: 12px;
                padding: 2px 6px;
                background: linear-gradient(0deg, #fa5a34 0%, #f87121 100%);
                border-radius: 2px;
                color: #fff;
                margin-right: 4px;
                flex: 0 0 auto;
              }
              .question-stem {
                font-weight: bold;
              }
            }
            .question-option {
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #333;
              margin-bottom: 15px;
              padding-left: 10px;
              .select-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 18px;
                height: 18px;
                flex: 0 0 auto;
                border: 1px solid #CECECE;
                border-radius: 50%;
                position: relative;
                margin-right: 6px;
                &:after {
                  content: '';
                  display: block;
                  width: 6px;
                  height: 6px;
                  background-color: #CECECE;
                  border-radius: 50%;
                }
                &.active {
                  @include border-color(1px, solid, $mainColor);
                  &:after {
                    @include bg-color($mainColor);
                  }
                }
              }
            }
            input, .check-date {
              width: 100%;
              height: 40px;
              border: 1px solid #e5e5e5;
              border-radius: 5px;
              outline: none;
              padding: 0 10px;
              line-height: 40px;
              font-size: 15px;
              color: #666;
              background-color: #fff !important;
              text-align: left !important;
              &:disabled {
                background-color: #eee !important;
              }
            }
            textarea {
              width: 100%;
              height: 130px;
              border: 1px solid #e5e5e5;
              border-radius: 5px;
              outline: none;
              padding: 10px;
              font-size: 15px;
              color: #666;
            }
          }
        }
      }
    }

  }
</style>
